#carousel-example-generic {
    margin-top: 50px !important;
}

.novelInfo {
    width: 100%;
    height: 20%;
}

.novelInfoRow {
    width: 100%;
    height: 100%;
    display: flex;
}

.novelInfoRowBox {
    width: 50%;
    height: 100%;
    display: flex;
}

.novelInfoRowBoxImg {
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.novelInfoRowBoxImg img {
    width: 90%;
    height: 90%;
}

.novelInfoRowBoxText {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
}

.novelInfoRowBoxTextFlex {
    width: 95%;
    height: 90%;
}

.novelInfoRowBoxTextTitle {
    width: 100%;
    height: 20%;
    font-size: 30px;
}

.novelInfoRowBoxTextAuthor {
    width: 100%;
    height: 10%;
    margin: 10px 0;
    color: rgb(182, 182, 182);
}

.novelInfoRowBoxTextIntroduce {
    width: 100%;
    height: 40%;
    margin: 10px 0;
    font-size: 15px;
    font-weight: 100;
    color: gray;
}

.novelInfoRowBoxTextOther {
    width: 100%;
    height: 10%;
    margin: 10px 0;
    color: rgb(182, 182, 182);
}

.centerBox {
    width: 100%;
    height: 250px;
    position: relative;
    top: -20px;
    z-index: 999;
    display: flex;
    justify-content: space-between;
}

.centerLeftBox {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.centerRightBox {
    width: 38%;
    height: 100%;
    background-color: #F9F9F9;
    border-radius: 10px;
}

.centerLeftBoxAuthorBox {
    width: 100%;
    height: 45%;
    display: flex;
    justify-content: space-around;
}

.centerLeftBoxAuthor {
    width: 48%;
    height: 100%;
    background: linear-gradient(to bottom, #ffc48e, #f9973e);
    border-radius: 10px;
    display: flex;
}

.centerLeftBoxAuthorLeft {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 10px;
}

.centerLeftBoxAuthorTitle {
    width: 100%;
    font-size: 30px;
    color: rgba(82, 41, 0, .9);
}

.centerLeftBoxAuthorClick {
    width: 100%;
    color: rgba(82, 41, 0, .9);
}

.centerLeftBoxAuthorHover:hover {
    color: white;
}

.centerLeftBoxAuthorClick:nth-child(2) {
    display: flex;
}

.centerLeftBoxAuthorClick:nth-child(2) div {
    margin: 0 5px;
}

.centerLeftBoxAuthorClick:nth-child(2) div:hover {
    color: white;
}

.centerLeftBoxAuthorRight {
    width: 30%;
    height: 100%;
}

.centerLeftBoxAuthorRight img {
    width: 100%;
    height: auto;
}

.centerLeftBoxCtegory {
    width: 98%;
    height: 45%;
    background-color: #F9F9F9;
    border-radius: 10px;
}

.centerLeftBoxCtegoryRow {
    width: 100%;
    height: 50%;
    display: flex;
}

.centerLeftBoxCtegoryRowTitle {
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: 800;
    font-size: 14px;
}

.centerLeftBoxCtegoryRowTitleIcon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50%;
}

.boyIcon {
    background-color: rgb(154, 226, 255);
}

.grilIcon {
    background-color: rgb(250, 176, 250);
}

.divide {
    width: 5%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(182, 182, 182);
}

.centerLeftBoxCtegoryRowInfo {
    width: 85%;
    height: 100%;
    display: flex;
}

.centerLeftBoxCtegoryRowInfo a {
    width: calc(100% / 6);
    height: 100%;
    display: flex;
    align-items: center;
}

.centerRightBoxTitle {
    width: 100%;
    height: 20%;
    font-size: 20px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.centerRightBoxInfo {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.centerRightBoxInfo .centerRightBoxInfoRow {
    width: 100%;
    height: calc(100% / 6);
    padding: 0 20px;
}
.centerRightBoxInfoRow{
    display: flex;
    justify-content: space-between;
}